<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="base :: #pageInfo"></div>
    <link rel="stylesheet" href="/dance/css/newsList.css">
    <link rel="iocn" href="/dance/favicon.ico">
    <link rel="stylesheet" href="/dance/css/paginate.min.css">
    <link rel="stylesheet" href="/dance/css/footer.min.css">
</head>
<body>

    <!-- 导航栏 -->
    <div th:replace="base :: #navbar"></div>


    <div class="content">
        <div class="left">
<!--            <div class="top">-->
<!--                <img src="./dance/img/bg1.jpg" alt="">-->
<!--            </div>-->
            <div class="list">
                <a th:href="${'/newsDetail/' + item.infoId}" th:each="item, status : ${dataInfo}">
                    <div class="item">
                        <div><img th:src="${item.imageUrl}" alt=""></div>
                        <div>
                            <div class="title" th:text="${item.title}"></div>
                            <p th:text="${item.intro}"></p>
                            <div class="tag">单色舞蹈</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="page">
                <div class="paging-area">
                    <input type="hidden" id="totalPage" th:value="${maxPage}"/>
                    <input type="hidden" id="page" th:value="${page}"/>
                    <div class="box-paging" id="box-paging">
                    </div>
                </div>
            </div>
        </div>
        <div th:replace="components/hotNews :: #rightHotNews"></div>
    </div>


    <!-- 页脚 -->
    <div th:replace="base :: #footer"></div>

    <script src="./dance/js/jquery.min.js"></script>
    <script src="./dance/js/jquery-paginate.js"></script>
    <script>
        //分页功能
        var total = parseInt($("#totalPage").val());
        var page = parseInt($("#page").val());
        $('.box-paging').paginate({
            pageIndex: page - 1, //当前页数
            totlePageCount: total, //总页数
            maxBtnCount: 4, //按钮数量最多有
            hasDots: true, //是否显示省略号
            hasFirstLast: true, //是否开启首尾页跳转功能
            btnClass: 'pager-numbtn', //数字按钮类名
            pageTurnClass: 'pager-turnbtn', //翻页按钮类名
            firstLastClass: 'pager-flbtn', //首页尾页按钮类名
            prevPageName: '上页', //“上一页”标签文字
            nextPageName: '下页', //“下一页”标签文字
            firstPageName: '首页',
            lastPageName: '尾页',
            callback: function (api) {
                console.log(api)
            }
        });
    </script>
</body>
</html>
